<script setup>
import { ref } from 'vue';

// 定义图片数组
const images1 = ref([
  '/pic/1.jpg',
  '/pic/2.jpg',
  '/pic/3.jpg',
  '/pic/4.jpg',
  '/pic/5.jpg',
  '/pic/6.jpg'
]);
const images2 = ref([
  '/pic/7.jpg',
  '/pic/8.jpg',
  '/pic/9.jpg',
  '/pic/10.jpg',
  '/pic/11.jpg',
  '/pic/12.jpg'
]);
</script>

<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <!-- 循环遍历图片数组 -->
    <el-carousel-item v-for="(item, index) in images1" :key="index">
      <img :src="item" alt="Carousel Image" style="width: 100%; height: 100%; object-fit: cover;" />
    </el-carousel-item>
  </el-carousel>

  <el-carousel :interval="4000" type="card" height="200px">
    <!-- 循环遍历图片数组 -->
    <el-carousel-item v-for="(item, index) in images2" :key="index">
      <img :src="item" alt="Carousel Image" style="width: 100%; height: 100%; object-fit: cover;" />
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
